<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用户注册</title>
<script type="text/javascript" src="/resource/js/jquery-3.2.1.js"></script>
<script type="text/javascript" src="/resource/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="/resource/css/bootstrap.min.css">
<script type="text/javascript" src="/resource/js/jquery.validate.js"></script>
<link rel="stylesheet" href="/resource/css/jqueryvalidate/screen.css">
</head>
<body>
	<div class="container">
		<div>
			<!-- 图片 -->
			<a href="/"> <img alt="" src="/resource/pic/logo-admin.jpg" height="50" width="100" ></a> 
			<hr>
		</div>
		<div class="row">
			<div class="col-md-6">
					<!-- 错误提示信息 -->
					<span id="errorMsg" style="color:red"></span>
				<!-- <form action="reg" method="post"> -->
				<form:form action="" method="post" modelAttribute="user" id="regForm">
				
					<div class="form-group">
						<label for="username">用户名：</label> 
						<form:input path="username" class="form-control"  id="username" />
						<form:errors path="username" cssStyle="color:red"></form:errors>
					</div>
					
					<div class="form-group">
						<label for="password">密码：</label>
						<form:input path="password" class="form-control"  id="password" />
						<label><form:errors path="password" cssStyle="color:red"></form:errors></label>
					</div>
					
					<div class="form-group">
						<label for="repassword">再次输入密码：</label>
						<input type="text" class="form-control"  id="repassword" name="repassword" />
					</div>
					
					<div class="form-group">
						<label for="nickname">昵称：</label> 
						<form:input path="nickname" class="form-control"  id="nickname" />
						<form:errors path="nickname" cssStyle="color:red"></form:errors>
					</div>
					
					<div class="form-group">
						<label for="birthday">生日：</label> 
						<form:input path="birthday" type="date" class="form-control"  id="birthday" />
						<form:errors path="birthday" cssStyle="color:red"></form:errors>
					</div>
					
					<div class="form-group">
						<label for="gender">性别：</label> 
						
						<div class="form-check form-check-inline">
							
							<form:radiobutton path="gender" class="form-check-input"  id="inlineRadio1"  value="0" />	
							<label class="form-check-label" for="inlineRadio1">女</label>
						</div>
						<div class="form-check form-check-inline">
							
							<form:radiobutton path="gender" class="form-check-input"  id="inlineRadio2"  value="1" />
							<label class="form-check-label" for="inlineRadio2">男</label>
						</div>
					</div>
					
					<div class="form-group">
						<button type="reset" class="btn btn-primary">重置</button>
						<button type="submit" class="btn btn-primary">注册</button>
					</div>
				<%-- </form> --%>
				</form:form>
			</div>
			<!-- 加上图片 -->
			<div class="col-md-6">
				<img alt="" src="/resource/pic/bg-reg.jpg" height="300">
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">
$(function(){
	$("#regForm").validate({
		rules:{
			username:{
				required:true,
				rangelength:[2,10],
				remote:{
					url:"/user/checkUsername",//请求路径
					type:"post",//请求方式
					dataType:"json",//接收数据格式
					data:{	//要传递的数据
						username:function(){
							return $("#username").val();
						}
					}
				}
			},
			password:{
				required:true,
				min:6
			},
			repassword:{
				equalTo:"#password"
			}
			
		},
		messages:{
			username:{
				required:"用户名不能为空",
				rangelength:"用户名长度需要在2位-20位之间",
				remote:"该用户名已被注册"
			},
			password:{
				required:"密码不能为空",
				min:"密码不得小于6位"
			},
			repassword:{
				equalTo:"两次输入的密码不一致"
			}
		},
		submitHandler:function(form){
			
			
			//使用ajax提交登录信息
			$.post(
				"/user/reg",
				$("#regForm").serialize(),
				function(result){
					//获取返回信息，如果为真，则跳转到登录页面
					if(result){
						location="/user/toLogin";
					}else{
						//如果为假，则展示信息
						$("#errorMsg").html("注册失败，请联系管理员");
					}
				}
			)
		}
	})
})


</script>
</html>